<template>
  <div id="app">
    <div>App页面中{{ msg }}</div>
    <!-- 3.使用mybutton组件 -->
    <mybutton :text="msg"></mybutton>
    <!-- 新增一个type属性，当type='primary'时，按钮要变成蓝色 -->
    <mybutton :text="msg2" :type="color2"></mybutton>
    <mybutton type="success" text="成功按钮"></mybutton>
    <mybutton type="warning" text="警告按钮"></mybutton>

    <hr />

    <ul>
      <!-- 封装一个todo-item的组件，专门用来渲染每一条todo事项 -->
      <todo-item v-for="item in todoList" :key="item.id" :todo="item"></todo-item>
    </ul>

    <hr>

    <div class="father">
      我儿子的女朋友叫：{{songirlname}}
      <!-- 父组件中，通过v-on指令监听子组件发射过来的事件，并在事件的处理函数中获取发射过来的数据，通过函数参数获取值 -->
      <son @tellfather="getname"></son>
    </div>
  </div>
</template>

<script>
// 1. 引入button组件
import mybutton from './components/my-button.vue'
import TodoItem from './components/todo-item.vue'
import son from './components/son.vue'
export default {
  // 2. 注册组件
  components: {
    mybutton,
    TodoItem,
    son
  },
  methods: {
    getname (v) {
      console.log('监听到了', v)
      this.songirlname = v
    }
  },
  data () {
    return {
      msg: '默认按钮',
      msg2: '主要按钮',
      color2: 'primary',
      songirlname: '???',
      todoList: [
        { id: 1, name: '吃饭', isDone: true },
        { id: 2, name: '睡觉', isDone: false }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  color: #2c3e50;
  margin-top: 60px;
}
ul {
  font-weight: bold;
  font-size: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: skyblue;
  width: 240px;
}
.father {
  border: 1px solid #000;
  padding: 50px;
}
</style>
